<template>
  <div class="category">
    <nav-bar class="category-nav-bar">
      <div slot="center">商品分类</div>
    </nav-bar>
    <section class="content">
      <tab-menu :categories="categories" class="menu" @itemClick="itemClick"></tab-menu>
      <scroll class="category-wrapper">
        <tab-content-category :sub-categories="subCategories"></tab-content-category>
      </scroll>
    </section>
  </div>
</template>

<script>
// 引入子组件
import TabMenu from "@/views/category/ChildComps/TabMenu";
import TabContentCategory from "@/views/category/ChildComps/TabContentCategory";

import Scroll from "../../components/common/scroll/Scroll";
import NavBar from "@/components/common/navbar/NavBar";

// 网络请求
import {getCategory, getSubCategories} from '@/network/category'

export default {
  name: "Category",
  data() {
    return {
      categories: [],
      subCategories: []
    }
  },
  components: {
    TabMenu,
    TabContentCategory,
    NavBar,
    Scroll
  },
  methods: {
    // 网络请求
    _getCategory() {
      getCategory().then(res => {
        this.categories = res.data.category.list
        this._getSubCategories(0)
      })
    },
    _getSubCategories(index) {
      const maitKey = this.categories[index].maitKey
      getSubCategories(maitKey).then(res => {
        this.subCategories = res.data.list
      })
    },

    // 事件
    itemClick(index) {
      this._getSubCategories(index)
    }
  },
  created() {
    this._getCategory()
  }
}
</script>

<style scoped>
.category-wrapper{
  overflow: hidden;
  height: calc(100vh - 83px);
}
.category {

}

.category .category-nav-bar {
  background-color: var(--color-tint);
  color: #fff;
}

.category .content {
  display: flex;
}
.category .content .category-wrapper{
  flex: 1;
}
.category .content .menu {
  width: 100px;
  background-color: #F6F6F6;
}
</style>
